<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>2.6</title>
    <style>
        * {
            margin: 0;
            box-sizing: border-box;
        }

        input[type='password'] {
            /* 属性选择器，只控制符合条件属性的input。选中为password的input框 */
            color: blue;
        }

        .header a {
            /* 后代选择器，选中所有header容器内的a */
        }

        header>a {
            /* 子代元素选择器，仅仅选中下一级的a，再下级则不会被选中 */
        }

        html,
        body,
        h1,
        h2 {
            /* 并集选择器 */
        }

        div.header {
            /* calss=header的div标签才会被选中，交集选择器，class=header的div的含义 */
        }

        div:hover {
            /* 还有after之类的，伪类选择器 */
        }

        .example {
            color: aliceblue;
            font-size: large;
            font-family: 'Courier New', Courier, monospace;
            /* 字体族 */
            font-weight: 200;
            /* 字体粗细 */
            font-style: italic;
            /* 斜体字 */
            text-align: center;
            /* 这个和箱体marin：auto是不一样的。和flex也不同 */
            text-decoration: solid;
            /* 去超链接下环线常用 */
            line-height: normal;
            /* 行高 */
            background-color: ;
            background-image: url();
            background-position: right bottom;
            background-size: 30px;
            border: 0;
            margin: 0;
            display: block;
            /* block可以控制尺寸，inline不可以，但是inline-block独占一行且可以控制尺寸
            none则是隐藏，flex和grid */
            box-sizing: border-box;
            border-radius: 3px;
            /* 控制圆角 */
            padding: 0;
            /* 撑大元素本身 */
            margin: 0;
            /* 撑距离 */
            cursor: pointer;
            /* 鼠标样式 */
              /* 常用的，但还有很多很多很多很多 */
        }
    </style>
</head>

<body>
    <div style="height: 100%;">
        <h1>一级标题</h1>
        <h6>六级标题</h6>
        <p>段落Lorem ipsum dolor sit amet consectetur adipisicing elit. Earum laborum dolore aspernatur maiores voluptas
            dolorum fugit saepe, minus repudiandae vel deserunt libero inventore exercitationem consectetur dolor
            accusamus dicta? Expedita, amet.</p>
        <span><span></span></span>
        <a href="">链接</a>
        <!-- 文档内定位图片 -->
        <img src="IMAGE/illust_88682446_20220327_013850.jpg" alt="" style="height: 200PX;">
        <UL>
            <LI>1</LI>
            <LI>1</LI>
            <LI>1</LI>
        </UL>
        <OL>
            <LI>Lorem, ipsum.</LI>
            <LI>Lorem, ipsum dolor.</LI>
            <LI>Lorem, ipsum</LI>
        </OL>
        <DL>
            <DT>11</DT>
            <DD>3</DD>
            <DD>4</DD>
        </DL>
       
        <!-- 三类按钮 -->
        <button type="submit">确定</button></button>
        <!-- 会跳转请求后端webapi。是默认type -->
        <button type="reset">确定</button>
        <!-- 把上部表单还原成初始状态 -->
        <button type="button" onclick="document.forms[0].reset();">确定</button>
        <!-- 变成按钮。可以用js脚本赋予功能,比如上面这个就是reset功能 -->
        <label for=""></label>
        <!-- for内关联其他事物 -->
    </div>
    <!-- css选择器，是对控制对象的一种描述性表达式，你要控制谁？ -->
    <label for="">yes
        <input type="password">
    </label>
    <!-- css属性集合 -->
    <h1 class="example"></h1>
   
</body>

</html>